<template>
    <div class="wrapper">
        <div class="topWrapper">
            <div class="top">提现到</div>
            <div class="bottom">
                <img class="bankImg" :src="`https://apimg.alipay.com/combo.png?d=cashier&t=${bankInfo.bank}_s`" alt="" />
                <span class="bankName">{{ bankInfo.bankName }}</span>
                <span class="bankType">储蓄卡</span>
                <span class="bankNo" v-if="bankInfo.settleInfoBean">(**** **** **** {{ bankInfo.settleInfoBean.bankAccountNo }})</span>
            </div>
        </div>
        <div class="bottomWrapper">
            <div class="title">提现金额</div>
            <div class="money">
                <div class="label">￥</div>
                <van-field v-model="amount" autofocus size="large" placeholder="请输入提现金额" type="number" />
            </div>
            <div class="info">
                <span>提现金额为：{{ remit.remitMin }} - {{ remit.remitMax }}</span>
                <span class="tqAll" @click="withdrawalAll()">全部提取</span>
            </div>
            <div class="btn" @click="txEnd">确认</div>
            <div style="color: red; font-size: 14px; line-height: 25px" v-if="route.query.businessCode == 'SEDIMENT_WITHDRAW'">
                沉淀资金提现规则：每月15-20日之间,每月可提现一次，不可超过总资金30%
            </div>
            <!--            <van-checkbox v-model="checked">-->
            <!--                <span style="color: #66d6ff" @click.stop="goCat1">《共享经济灵活用工人员服务协议》</span>-->
            <!--            </van-checkbox>-->
            <van-popup v-model:show="showKeyboard" round :style="{ width: '80%' }">
                <div class="txInfo">
                    <div class="title">支付密码</div>
                    <div class="t1">
                        ￥
                        <span>{{ amount }}</span>
                    </div>
                    <van-divider />
                    <div class="fl">
                        <div class="top">
                            <span>提现金额</span>
                            <span>{{ fl.amount }} 元</span>
                        </div>
                        <div class="bottom">
                            <span>增值服务费</span>
                            <span>{{ fl.fee }} 元</span>
                        </div>
                    </div>
                    <van-password-input
                        :gutter="10"
                        :safe-area-inset-bottom="true"
                        :value="value"
                        :focused="showKeyboard"
                        @focus="showKeyboard = true"
                    />
                </div>
            </van-popup>
            <div>
                <!-- 数字键盘 -->
                <van-number-keyboard
                    z-index="2004"
                    random-key-order
                    :hide-on-click-outside="false"
                    v-model="valueKeyboard"
                    :show="showKeyboard"
                    @blur="showKeyboard = false"
                    @input="onInput"
                    @delete="onDelete"
                />
            </div>
        </div>
    </div>
</template>

<script>
import { defineComponent } from 'vue'
import { findByAgentNoBankInfo, payPwdExist, preCalcFeeNew, withdrawLimitNew, withDrawNew } from '@/api/wallet'
import banks from '@/utils/banks.json'
import { showToast, showConfirmDialog } from 'vant'
import 'vant/es/toast/style'
import 'vant/es/dialog/style'
import JSEncrypt from 'jsencrypt'
import { checkSignResult, openSignSdk } from '../../api/agent'

export default defineComponent({
    name: 'cashInfo',
    setup() {
        const route = useRoute()
        const router = useRouter()
        const state = reactive({
            fl: {},
            value: '', // 显示的密码
            checked: false,
            valueKeyboard: '', // 显示的密码
            showKeyboard: false,
            show: false,
            amount: '',
            bankInfo: {},
            remit: {}
        })
        // 获取提现卡信息
        const getFindByAgentNoBankInfo = () => {
            findByAgentNoBankInfo().then(res => {
                state.bankInfo = res.object
                for (var key in banks) {
                    if (banks[key].indexOf(state.bankInfo.bankName) !== -1) {
                        state.bankInfo.bank = key
                        return
                    }
                }
            })
        }
        getFindByAgentNoBankInfo()
        // 获取提现金额范围
        const getWithdrawLimitNew = () => {
          console.log(route.query,'route111')
            withdrawLimitNew({
                businessCode: route.query.businessCode
            }).then(res => {
                state.remit = res.object
            })
        }
        getWithdrawLimitNew()

        const onInput = value => {
            console.log(value)
            console.log(value.toString().length)
            state.value = state.value + value.toString()
            if (state.value.length == 6) {
                const key =
                    'MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAicjwP+F30h1RmMZuAjKIW7+pJxK6NlhvsNks28X4/91iF7lBoZd57ZuN+310vaFxol8khFd5SDbnx7piqPxuAaUC/IygD4iPn2ZSSA5pqqdQYodJVckyh4PNjbh6lDkjYNoAGhz1BY+AiQz2uPTNFnOqmDu1ZfhoQCWMhSleW0zikybl3KRcczDja96+DmKkssXAYN5clnnZMcBjuWOwBz5pgHiQEQTatdWm/un3SR366LrnKAXYUyAEUxwuEA9qtiaDvKgLzSl84FqmvU6cLzmLJM+b+++0CONoT0IR9I6XFkF/wErnd8Y+gEB4oQEURe39BUjl5VcxSJxf1HorSQIDAQAB'
                // 调注册接口
                let jse = new JSEncrypt()
                jse.setPublicKey(key)
                let payPwd = jse.encrypt(state.value)
                withDrawNew({
                    accountType: route.query.accountType,
                    payPwd: payPwd,
                    amount: state.amount,
                    fee: state.fl.fee
                    // remitAmount:'',
                }).then(res => {
                    if (res.code == 200) {
                        state.showKeyboard = false
                        router.push({
                            path: '/results',
                            query: {
                                transOrder: res.object.transOrder,
                                bankName: state.bankInfo.bankName
                            }
                        })
                    } else {
                        showToast(res.message)
                        state.value = ''
                        state.valueKeyboard = ''
                    }
                })
            }
        }
        const onDelete = value => {
            console.log(state.value)
            state.value = state.value.slice(0, state.value.length - 1)
        }

        const withdrawalAll = () => {
             // 沉淀资金提现最大不超过总资金的百分之30
             if (route.query.businessCode == 'SEDIMENT_WITHDRAW') {
                state.amount = (Number(route.query.balance) * 0.3).toFixed(2)
                return
            }
            state.amount = Number(route.query.balance)
        }
        const goCat1 = () => {
            router.push({
                path: '/cashAgreement'
            })
        }
        const txEnd = () => {
            // if (!state.checked) {
            //     console.log(1231231)
            //     showToast('请阅读并同意《共享经济灵活用工人员服务协议》')
            //     return
            // }
            // 沉淀资金最大不能超过百分之30
            if (route.query.businessCode == 'SEDIMENT_WITHDRAW' && Number(state.amount) > (Number(route.query.balance) * 0.3).toFixed(2)) {
                showToast('沉淀资金最大金额不能超过总资金的30%')
                return
            }
            if (state.amount == '') {
                showToast('请输入金额')
                return
            }

            if (Number(state.amount) < Number(state.remit.remitMin) || Number(state.amount) > Number(state.remit.remitMax)) {
                showToast('请输入提现金额范围内金额')
                return
            }

            if (state.amount > Number(route.query.balance)) {
                showToast('余额不足')
                return
            }
            // payPwdExist().then(res => {
            //     // 检查是否设置了支付密码
            //     if (res.object.isExist == 'NO') {
            //         // 未设置支付密码
            //         showConfirmDialog({
            //             title: '支付密码',
            //             message: '你暂未重置支付密码，请重置密码后提现',
            //             confirmButtonColor: '#66d6ff'
            //         })
            //             .then(() => {
            //                 router.push({
            //                     path: '/getCode',
            //                     query: {
            //                         pay: 1
            //                     }
            //                 })
            //             })
            //
            //             .catch(() => {
            //                 // on cancel
            //             })
            //     } else {
            //    已经设置过提现密码  然后查费率
            //         preCalcFeeNew({
            //             businessCode: route.query.businessCode,
            //             amount: state.amount
            //         }).then(res => {
            //             state.fl = res.object
            //             state.showKeyboard = true
            //         })
            //     }
            // })
			payPwdExist().then(res => {
			    // 检查是否设置了支付密码
			    if (res.object.isExist == 'NO') {
			        // 未设置支付密码
			        showConfirmDialog({
			            title: '支付密码',
			            message: '你暂未重置支付密码，请重置密码后',
			            confirmButtonColor: '#66d6ff'
			        })
			            .then(() => {
			                router.push({
			                    path: '/getCode',
			                    query: {
			                        pay: 1
			                    }
			                })
			            })
			            .catch(() => {
			                // on cancel
			            })
			    } else {
			        //    已经设置过提现密码  然后查费率
			        preCalcFeeNew({
			            businessCode: route.query.businessCode,
			            amount: state.amount
			        }).then(res => {
			            state.fl = res.object
			            state.showKeyboard = true
			        })
			    }
			})
            // checkSignResult().then(res => {
            //     if (res.object.result === 'Y') {
            //         // =200 则是已签约
            //         payPwdExist().then(res => {
            //             // 检查是否设置了支付密码
            //             if (res.object.isExist == 'NO') {
            //                 // 未设置支付密码
            //                 showConfirmDialog({
            //                     title: '支付密码',
            //                     message: '你暂未重置支付密码，请重置密码后',
            //                     confirmButtonColor: '#66d6ff'
            //                 })
            //                     .then(() => {
            //                         router.push({
            //                             path: '/getCode',
            //                             query: {
            //                                 pay: 1
            //                             }
            //                         })
            //                     })
            //                     .catch(() => {
            //                         // on cancel
            //                     })
            //             } else {
            //                 //    已经设置过提现密码  然后查费率
            //                 preCalcFeeNew({
            //                     businessCode: route.query.businessCode,
            //                     amount: state.amount
            //                 }).then(res => {
            //                     state.fl = res.object
            //                     state.showKeyboard = true
            //                 })
            //             }
            //         })
            //     } else {
            //         // 签约
            //         showConfirmDialog({
            //             message: '您还未签约，请前往签约',
            //             title: '提示',
            //             confirmButtonColor: '#66d6ff'
            //         })
            //             .then(() => {
            //                 openSignSdk().then(ele => {
            //                     location.href = ele.object.signUrl
            //                     // router.push({
            //                     //     path: ele.object.signUrl
            //                     // })
            //                 })
            //                 // router.push({
            //                 //     path: '/signing',
            //                 //     query: {
            //                 //         info: JSON.stringify(state.bankInfo.settleInfoBean)
            //                 //     }
            //                 // })
            //             })
            //             .catch(() => {
            //                 // on cancel
            //             })
            //     }
            // })
        }

        return {
            ...toRefs(state),
            withdrawalAll,
            onInput,
            goCat1,
            onDelete,
            txEnd,
            route
        }
    }
})
</script>

<style scoped lang="scss">
.wrapper {
    height: 100vh;
    display: flex;
    flex-direction: column;

    .topWrapper {
        margin-bottom: 10px;
        padding: 10px;
        box-sizing: border-box;
        .top {
            padding: 10px;
            font-size: 16px;
            font-weight: 400;
            color: #000000;
            opacity: 1;
        }

        .bottom {
            display: flex;
            align-items: center;
            justify-content: center;

            .bankImg {
                width: 18px;
            }

            span {
                margin: 0 5px;
            }

            .bankName {
                font-size: 16px;
                font-weight: 400;
                color: #000000;
            }

            .bankType {
                font-size: 12px;
                font-weight: 400;
                color: #000000;
                opacity: 1;
            }
        }
    }

    .bottomWrapper {
        flex: 1;
        background: #ffffff;
        opacity: 1;
        border-radius: 10px 10px 0px 0px;
        padding: 23px 32px;

        .title {
            font-size: 14px;
            font-weight: 400;
            color: #000000;
            opacity: 1;
        }

        .money {
            display: flex;
            align-items: center;
            border-bottom: 1px solid #e4e4e4;

            .label {
                font-size: 36px;
            }
        }

        .info {
            font-size: 12px;
            display: flex;
            padding: 10px 0;

            .tqAll {
                padding: 0 10px;
                color: #0047b2;
            }
        }
    }

    .btn {
        width: 150px;
        height: 40px;
        background: #66d6ff;
        opacity: 1;
        border-radius: 6px;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 50px auto 10px auto;
    }

    .txInfo {
        padding: 10px 20px;
        box-sizing: border-box;

        .title {
            font-weight: 600;
            text-align: center;
        }

        .t1 {
            text-align: center;
            margin-top: 30px;

            span {
                font-size: 30px;
                font-weight: 600;
            }
        }

        .fl {
            line-height: 40px;
            color: #545454;

            .top {
                display: flex;
                justify-content: space-between;
            }

            .bottom {
                display: flex;
                justify-content: space-between;
            }
        }
    }
}
</style>
<style lang="scss">
.van-password-input {
    margin: 0;
}

.van-password-input__security li {
    background-color: #eee;
    border-radius: 5px;
    height: 40px;
}

.money {
    .van-field__control {
        font-size: 24px !important;
    }
}

.van-popup--center {
    top: 30% !important;
}
</style>
